<template>
  <div class="product-clearance">
    <header>
      <h1>产品库存管理系统</h1>
      <div class="filters">
        <input type="text" v-model="searchQuery" placeholder="搜索产品...">
        <!-- <button @click="openModal" class="btn-add-product">添加产品</button> -->
        <el-button :plain="true" @click="openModal" class="btn-add-product">添加产品</el-button>
        <!-- <button @click="clearAll" class="btn-clear-all">全部清理</button> -->
        <el-button :plain="true" @click="clearAll" class="btn-clear-all">全部清理</el-button>
      </div>
    </header>
    <div class="product-list">
      <div class="product-item" v-for="(product, index) in filteredProducts" :key="product.id">
        <div class="product-info">
          <h3>{{ product.name }}</h3>
          <p>库存数量: {{ product.stock }}</p>
          <input type="number" v-model="product.clearance" min="0" :max="product.stock" placeholder="清理数量">
        </div>
        <!-- <button @click="clearInventory(index)" class="btn-clear">清理</button> -->
        <el-button :plain="true" @click="clearInventory(index)" class="btn-clear">清理</el-button>
      </div>
    </div>
    <div v-if="isModalVisible" class="add-product-modal">
      <h2>添加新产品</h2>
      <input type="text" v-model="newProduct.name" placeholder="产品名称" required>
      <input type="number" v-model="newProduct.stock" placeholder="库存数量" required>
      <!-- <button @click="addProduct" class="btn-add-product">添加产品</button> -->
      <el-button :plain="true" @click="addProduct" class="btn-add-product">添加产品</el-button>
      <button @click="closeModal" class="btn-close-modal">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductClearance',
  data() {
    return {
      searchQuery: '',
      selectedCategory: 'all',
      products: [
        { id: 1, name: '产品A', stock: 50, clearance: 0 },
        { id: 2, name: '产品B', stock: 30, clearance: 0 },
        { id: 3, name: '产品C', stock: 10, clearance: 0 },
        //   现有产品的数据
      ],
      newProduct: {
        name: '',
        stock: 0,
      },
      isModalVisible: false
    };
  },
  computed: {
    filteredProducts() {
      let filtered = this.products;
      if (this.selectedCategory !== 'all') {
        filtered = filtered.filter(product => product.category === this.selectedCategory);
      }
      return filtered.filter(product => {
        return product.name.toLowerCase().includes(this.searchQuery.toLowerCase());
      });
    }
  },
  methods: {
    clearInventory(index) {
      let product = this.products[index];
      let clearance = parseInt(product.clearance, 10);
      if (clearance > 0 && clearance <= product.stock) {
        product.stock -= clearance;
        // alert(`清理了${clearance}个${product.name}，剩余库存${product.stock}`);
        this.$message({
          showClose: true,
          message:`清理了${clearance}个${product.name}，剩余库存${product.stock}` ,
          type: 'success'
        });
        product.clearance = 0; //   清理后重置清理数量
      } else {
        // alert('请输入正确的清理数量！');
        this.$message({
          showClose: true,
          message: '请输入正确的清理数量！',
          type: 'error'
        });
      }
    },
    clearAll() {
      if (confirm('您确定要清理所有产品的库存吗？')) {
        this.products.forEach(product => {
          product.stock = 0;
        });
      // this.$confirm('此操作将清理所有产品的库存, 是否继续？', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   }).then(() => {
      //     this.$message({
      //       type: 'success',
      //       message: '所有产品库存已清理完毕！'
      //     });
      //   }).catch(() => {
      //     this.$message({
      //       type: 'info',
      //       message: '已取消清理'
      //     });          
      //   });
        this.$message({
          showClose: true,
          message: '所有产品库存已清理完毕！',
          type: 'success'
        });
        // alert('所有产品库存已清理完毕！');
      }
    },
    openModal() {
      this.isModalVisible = true;
    },
    closeModal() {
      this.isModalVisible = false;
      this.newProduct = {
        name: '',
        stock: 0,
      };
    },
    addProduct() {
      //   验证输入的新产品信息是否完整
      if (this.newProduct.name.trim() === '' || this.newProduct.stock <= 0) {
        this.$message({
          showClose: true,
          message: '请填写完整的产品信息！',
          type: 'error'
        });
        return;
      }
    

      //   生成新的产品ID
      const newId = this.products.length > 0 ? this.products[this.products.length - 1].id + 1 : 1;

      //   创建新产品的对象
      const newProduct = {
        id: newId,
        name: this.newProduct.name,
        stock: this.newProduct.stock,
        clearance: 0
      };

      //   将新产品添加到products数组中
      this.products.push(newProduct);

      //   重置新产品的表单数据
      this.newProduct = {
        name: '',
        stock: 0
      };

      //   成功消息
      this.$message({
          showClose: true,
          message: '已成功添加！',
          type: 'success'
        });
    }
  }
};
</script>

<style scoped>
.product-clearance {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.filters {
  margin-bottom: 20px;
}

input[type="text"] {
  margin-right: 10px;
  padding: 8px;
}

.product-list {
  display: flex;
  flex-direction: column;
}

.product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.product-info {
  text-align: left;
}

.btn-clear-all, .btn-clear {
  padding: 10px 20px;
  cursor: pointer;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
}

.btn-clear-all:hover, .btn-clear:hover {
  background-color: #d32f2f;
}

.add-product-form {
  margin-bottom: 20px;
}
.add-product-form input {
  margin-right: 10px;
  padding: 8px;
  margin-bottom: 10px;
}
.btn-add-product {
  padding: 10px 20px;
  cursor: pointer;
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 4px;
}
.btn-add-product:hover {
  background-color: #1976d2;
}

/* 以下是添加产品按钮里面的框的样式 */
.add-product-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 300px; /* 设置模态框的宽度 */
}

.add-product-modal h2 {
  margin-bottom: 10px;
  font-size: 18px;
}

.add-product-modal input {
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.add-product-modal button {
  padding: 10px 20px;
  cursor: pointer;
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 4px;
  margin-top: 10px;
}

.add-product-modal button:hover {
  background-color: #1976d2;
}

.add-product-modal button.btn-close-modal {
  background-color: #d32f2f;
  margin-top: 10px;
}

.add-product-modal button.btn-close-modal:hover {
  background-color: #c62828;
}
/* 以上是添加产品按钮里面的框的样式 */
</style>